<template>
  <div>
    <el-card :bordered="false" shadow="never" class="i-table-no-border">
      <el-form ref="formItem" :model="formItem" label-width="100px" @submit.native.prevent>
        <div class="ivu-description-list-title">订单信息</div>
        <el-row class="mb10">
          <el-col :span="7">
            <el-form-item label="订单ID：">{{ formItem.id }}</el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单号：">{{ formItem.ordersn }}</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="改单次数：">{{ formItem.ordersn2 }}</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="支付方式：">{{ formItem.payTypeDesc }}</el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="购买类型：">{{ formItem.itemType == 1?'普通服务':'次卡服务' }}</el-form-item>
          </el-col>

          <template v-if="formItem.itemType == 2">
            <el-col :span="7">
              <el-form-item label="剩余次数：">{{ formItem.vipLeftTimes}}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="开始时间：">{{ formItem.vipStartTimeDesc}}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="结束时间：">{{ formItem.vipEndTimeDesc}}</el-form-item>
            </el-col>
          </template>
        </el-row>
        
        <el-divider style="margin: 20px 0 !important" />
        <div class="ivu-description-list-title">用户信息</div>
        <el-row class="mb10">
          <el-col :span="7">
            <el-form-item label="联系人：">{{ formItem.linkName }}</el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系人性别：">{{ formItem.linkSex ==2? '女':'男' }}</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="联系人电话：">{{ formItem.linkMobile }}</el-form-item>
          </el-col>
        </el-row>

        <el-divider style="margin: 20px 0 !important" />
        <div class="ivu-description-list-title">服务信息</div>
        <!-- <el-row class="mb10"> -->
        <el-col :span="7">
          <el-form-item label="服务项目：">{{ formItem.itemName }}</el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="省市区："
          >{{ formItem.province + '/' + formItem.city + '/' + formItem.district}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="上门地址：">{{ formItem.userAddress }}</el-form-item>
        </el-col>
        <el-col :span="7" v-if="formItem.itemType != 2">
          <el-form-item label="上门时间：">{{ formItem.serviceTimeDesc }}</el-form-item>
        </el-col>
        <!-- </el-row> -->
        <template v-if="formItem.itemSpecData">
          <el-col :span="6">
            <el-form-item label="项目规格：">{{formItem.itemSpecData.specName||""}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数量：">{{formItem.itemSpecData.specTime}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位：">{{formItem.itemSpecData.unitName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单价">{{formItem.itemSpecData.unitPrice}}</el-form-item>
          </el-col>
        </template>

        <el-row class="mb10">
          <el-col :span="5">
            <el-form-item label="服务酬劳价:">{{ formItem.costPrice||'0.00' }}</el-form-item>
          </el-col>
        </el-row>
        <el-divider style="margin: 20px 0 !important" />
        <div class="ivu-description-list-title">支付信息</div>
        <el-row class="mb10">
          <el-col :span="4">
            <el-form-item label="订单原价：">{{ formItem.originalPrice||'0.00' }}</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="优惠卷抵扣：">{{ formItem.couponPrice }}</el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="实际金额：">{{ formItem.payPrice||'0.00' }}</el-form-item>
          </el-col>
        </el-row>
        <template v-if="formItem.itemType == 1">
          <el-divider style="margin: 20px 0 !important" />
          <div class="ivu-description-list-title" v-if="formItem.agentId > 0 ">代理信息</div>
          <el-row class="mb10" v-if="formItem.agentId > 0 ">
            <el-col :span="7">
              <el-form-item label="代理名称：">{{ formItem.agent.title }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="负责人：">{{ formItem.agent.linkName }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="手机号：">{{ formItem.agent.linkMobile }}</el-form-item>
            </el-col>
            <el-col :span="4" v-if="formItem.status == 40">
              <el-form-item label="可获得佣金：">{{formItem.agentFee}}元</el-form-item>
            </el-col>
          </el-row>
          <div class="ivu-description-list-title" v-if="formItem.companyId > 0 ">门店信息</div>
          <el-row class="mb10" v-if="formItem.companyId > 0 ">
            <el-col :span="7">
              <el-form-item label="门店名称：">{{ formItem.company.title }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="负责人：">{{ formItem.company.linkName }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="手机号：">{{ formItem.company.linkMobile }}</el-form-item>
            </el-col>
            <el-col :span="4" v-if="formItem.status == 40">
              <el-form-item label="可获得佣金：">{{formItem.companyFee||'0.00'}}元</el-form-item>
            </el-col>
          </el-row>
          <div class="ivu-description-list-title" v-if="formItem.status >= 20">员工信息</div>
          <el-row class="mb10" v-if="formItem.itemType == 1 && formItem.status >= 20">
            <el-col :span="7">
              <el-form-item label="员工姓名：">{{ formItem.staffName }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="手机号：">{{ formItem.staffData.phone }}</el-form-item>
            </el-col>
            <el-col :span="4" v-if="formItem.status == 40">
              <el-form-item label="可获得佣金：">{{formItem.costFee}}元</el-form-item>
            </el-col>
          </el-row>
          <template v-if="formItem.signRemark  && formItem.itemType == 1 && formItem.status >= 25">
            <div class="ivu-description-list-title">签到信息</div>
            <el-row class="mb10">
              <el-col :span="7">
                <el-form-item label="签到日期：">{{ formItem.signTimeDesc }}</el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="服务人员备注：">{{ formItem.signRemark }}</el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="签到图片：">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="formItem.signImgsArray[0]"
                    :preview-src-list="formItem.signImgsArray"
                  ></el-image>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-if="formItem.status >= 30 && formItem.itemType != 2 && formItem.staffRemark">
            <div class="ivu-description-list-title">完成信息</div>
            <el-row class="mb10">
              <el-col :span="7">
                <el-form-item label="完成时间：">{{ formItem.handleTimeDesc }}</el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="服务人员备注：">{{ formItem.staffRemark }}</el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="完成图片:">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="formItem.staffImgsArray[0]"
                    :preview-src-list="formItem.staffImgsArray"
                  ></el-image>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <div class="ivu-description-list-title">备注信息</div>
          <el-row class="mb10">
            <el-col :span="20">
              <el-form-item label="用户备注：">{{ formItem.remark }}</el-form-item>
            </el-col>
          </el-row>
          <el-row class="mb10">
            <el-col :span="20">
              <el-form-item label="平台备注：">{{ formItem.remarkSaler }}</el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </el-card>
   </div>
</template>
  
  <script>
import { getOrderInfoApi, confirmEditOrderApi } from '@/api/onsite';
export default {
  name: 'orderDetail',
  props: {
    orderId: Number,
  },
  data() {
    return {
      title: '订单详情',
      order_info: null,
      modals: false,
      send_locked: false,
      formItem: {},
      pliceData: [],
      itemData: [],
    };
  },
  created(){
    this.getOrderInfo();
  },
  methods: {
    // 订单详情
    getOrderInfo() {
      getOrderInfoApi(this.orderId)
        .then(async (res) => {
          this.formItem = res;
          this.modals = true;
        })
        .catch((res) => {
          this.$message.error('获取失败');
        });
    },
    // 图片显示
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },
    // 提交
    putSend() {
      if (this.send_locked) {
        return this.$message.error('请勿重复提交');
      }
      this.send_locked = true;
      confirmEditOrderApi(this.formItem)
        .then(async (res) => {
          this.send_locked = false;
          this.$message.success(res.msg);
          this.$emit('submitOk');
          let that = this;
          setTimeout(function () {
            that.modals = false;
          }, 1500);
        })
        .catch((res) => {
          this.send_locked = false;
          this.$message.error(res.msg);
        });
    },
    cancel(name) {
      this.modals = false;
      this.$emit('clearId');
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .ivu-description-list-title {
    margin-bottom: 30px;
    color: #17233d;
    font-weight: bold;
    font-size: 14px;
  }

  .ivu-table th {
    background-color: #f8f8f9 !important;
  }

  .express_temp_id {
    position: relative;
  }

  .express_temp_id button {
    position: absolute;
    top: 50%;
    right: 110px;
    padding: 0;
    border: none;
    background: none;
    transform: translateY(-50%);
    color: #57a3f3;
  }

  .ivu-btn-text:focus {
    box-shadow: none;
  }

  .trips {
    color: #ccc;
  }

  .product-data {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-data .image {
    width: 50px !important;
    height: 50px !important;
  }

  .line2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
  